<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
</head>

<body>

<script type="text/javascript">

    var socket;

    if (window.WebSocket) {
        /**
         * 建立webSocket链接
         */
        socket = new WebSocket("ws://localhost:9999/wwss");

        /**
         * 如果客户端接收到服务器端发送过来的消息。会调用该方法onmessage
         * ev是服务器端返回给客户端的对象。
         */
        socket.onmessage = function (ev) {
            var tx = document.getElementById("responseText");
            tx.value = tx.value + ev.data+"\n";
        }
        /**
         * ev是服务器端
         */
        socket.onopen = function (ev) {
            var tx = document.getElementById("responseText");
            tx.value = "链接建立"+"\n";
        }
        socket.onclose = function (ev) {
            var tx = document.getElementById("responseText");
            tx.value = tx.value+"\n"+"链接断开";
        }

    }else {
        alert("浏览器不支持webSocket")
    }


    /**
     * 客户端向服务器端发送数据
     */
    function sendmsg(message) {
        if (!window.WebSocket){
            return;
        }
        /**
         * socket状态，如果是open就发送数据。
         */
        if (socket.readyState == socket.OPEN) {
            socket.send(message);
        }else {
            alert("还未链接")
        }
    }
</script>

<!--客户端输入，服务器返回数据-->
    <form  onsubmit="return false">
        <textarea name="message" style="width:400px; height:200px"></textarea>

        <input type="button" value="发送消息" onclick="sendmsg(this.form.message.value)"/>

        <h3>服务器端输出</h3>
        <textarea id="responseText" style="width:400px; height:200px"></textarea>

        <input type="button" onclick="javaScript; document.getElementById('responseText').value=''" value="清空内容'/>
    </form>

</body>
</html>